import React from "react";
export default class MyMain extends React.Component {
  state = {
    count: 0,
    user: { uname: 'wqw' },
    list: [1, 2, 3, 5, 6]
  }
  constructor() {
    super()
  }
  // 加一的方法
  incrementCount=()=>{
    // 是可以知道state的结果的，不需要做依赖更新后的状态来更新其他状态，或者做其他的业务
    this.setState({
      count: this.state.count + 1
    })
  }
  render() {
    return (
      <div>
        <div>count: {this.state.count}</div>
        <button onClick={() => {
          // this.state.count+=1 //直接给state赋值，不能响应式更新
          this.setState({
            count: this.state.count + 1
          })
        }}>count++</button>
        <br />
        <div>
          username: {this.state.user.uname}
        </div>
        <button onClick={
          () => {
            // 浅克隆
            let obj = Object.assign({}, this.state.user, { uname: '曹翔博' });

            this.setState({
              user: obj
            })
          }
        }>edit username</button>
        <br />
        <div>
          list:{this.state.list.join('-')}
        </div>
        <button onClick={() => {
          // this.state.list.splice(0,1)  //直接操作数组元素，不能响应式更新
          //   浅克隆
          let list = this.state.list.concat([])
          list.splice(0, 1)

          this.setState({
            'list':list
          })
        }}>modify list</button>
        {/* // 如果要依赖当前 state 来更新下一个 state，可以让 setState() 接收一个函数而不是一个对象 */}
        <h4>count: {this.state.count}</h4>
        <button onClick={()=>{

          this.setState((preState, props)=>{
             // preState：更新前的 state
            // props：当前的 props
            // console.log( preState); //{count: '[object Object]10', user: {…}, list: Array(5)}
            // console.log( props); // {}

            return {
              count: preState.count + 10
            }
          })

        }}>setState()用法2</button>
        <h4>count: {this.state.count}</h4>
        <button onClick={()=>{
          this.setState(
            // 参数1，可以是一个对象，或者是callback,callback再返回一个对象
            (preState, props)=>{
            return {
              count: preState.count + 10
            }
          },
          //参数2，是个callback,再函数中，可以拿到更新后的数据
          ()=>{
            console.log(this.state.count);
          }
          )

        }}>setState()用法3</button>
        <hr />
        <div>
          <h1>setState()合并更新</h1>
          <button onClick={
            ()=>{
              // 传入对象，会被合并，结果只执行一次,
              // 注意：这样 不会 像预期的那样工作
               // 当 React 重新渲染该组件时，this.state.count 会变为 1，而不是你期望的 5。
  // 这是因为上面的 incrementCount() 函数是从 this.state.count 中读取数据的，
  // 但是 React 不会更新 this.state.count，直到该组件被重新渲染。
  // 所以最终 incrementCount() 每次读取 this.state.count 的值都是 0，并将它设为 1。
              // this.incrementCount()
              // this.incrementCount()
              // this.incrementCount()
              // this.incrementCount()
              // this.incrementCount()

              // 正确处理方式
// 传入函数，不会被合并，因为函数无法合并
// 初始值 this.state.count = 0
              this.setState((preState,props)=>{
                return {
                  count: preState.count +1
                }
              })
              this.setState((preState,props)=>{
                return {
                  count: preState.count +1
                }
              })
              this.setState((preState,props)=>{
                return {
                  count: preState.count +1
                }
              })
// 最后： this.state.count = 3
            }
          }>更新</button>
        </div>
      </div>
    )
  }
}